<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/styles/iview.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/iview.min.js"></script>
    <link href="{{ url_for('static',filename='css/cms.css') }}" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
    <title>后台管理</title>
</head>
<body>
<div id="app">
    <header class="header">
        <h2>老年人心理健康评估：后台管理</h2>
        <div>
            <h2>Admin</h2>
            <i-button @click="logout">退出</i-button>
        </div>
    </header>
    <div class="main">
        <aside class="sidebar">
            <ul>
                <li class="active"><a href="/cms">首&nbsp;&nbsp;页</a></li>
                <li><a href="/user_control">用户管理</a></li>
                <li><a href="/question_bank">题库管理</a></li>
            </ul>
        </aside>
        <main class="content">
            <div class="overview">
                <div>
                    <icon type="ios-people"></icon>
                    <div>
                        <span>注册人数：</span>
                        <span>{{ context.register_count }} 人</span>
                    </div>
                </div>
                <div>
                    <icon type="md-flame"></icon>
                    <div>
                        <span>请求次数： </span>
                        <span>{{ context.visit_count }} 次</span>
                    </div>
                </div>
                <div>
                    <icon type="md-pie"></icon>
                    <div>
                        <span>测试次数： </span>
                        <span>{{ context.test_count }} 次</span>
                    </div>
                </div>
            </div>
            <div class="chart" id="chart"></div>
        </main>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            login_form: {
                name: "",
                pwd: ""
            },
            {#图表配置项#}
            option: {
                title: {
                    text: '平台信息'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['注册人数', '请求次数', '测试次数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: {{ context.date|safe }}
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '注册人数',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {
                            color: '#82d3f8'
                        },
                        lineStyle: {
                            color: '#3abaf4'
                        },
                        itemStyle: {
                            normal: {
                                color: '#3abaf4'
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: {{ context.register|safe }}
                    },
                    {
                        name: '访问次数',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {
                            color: '#a8f5b4'
                        },
                        lineStyle: {
                            color: '#63ed7a'
                        },
                        itemStyle: {
                            normal: {
                                color: '#63ed7a'
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: {{ context.visit|safe }}
                    },
                    {
                        name: '测试次数',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {
                            color: '#ffc473'
                        },
                        lineStyle: {
                            color: '#ffa426'
                        },
                        itemStyle: {
                            normal: {
                                color: '#ffa426'
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: {{ context.test|safe }}
                    },
                ]
            }
        },
        mounted: function () {
            {#初始化图表#}
            this.myChart = echarts.init(document.getElementById('chart'));
            this.myChart.setOption(this.option)
        },
        methods: {
            {#退出#}
            logout() {
                Cookies.remove('secret_key');
                //删除密钥
                window.location.href = '/admin'
            }
        }
    });
</script>
</html>
